<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>夜读书FM - 音频分享平台,随时随地,听我想听!</title>
    <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <meta name="author" content="夜读书,夜读书FM,电台">
    <meta name="description" content="音频分享平台，随时随地，听我想听！4亿用户选择的在线音频平台。1亿多条原创有声内容覆盖有声书、儿童、相声评书、财经新闻、音乐等328类。">
    <meta name="keywords" content="夜读书,网络电台,个人电台,音频,有声书,相声,儿童,音乐,情感">
    <link rel="stylesheet" href="{{ asset('/style/css/yefm.css') }}">   
    <script src="{{ asset('/scripts/ximalaya/xmsdk.min.js') }}"></script>
    <script src="{{ asset('/scripts/ximalaya/vue.min.js') }}"></script>    
</head>
<body>
@include('mobile.nav')
<div class="page search">
    @include('yefm.inc.search_key')
    <div id="search_app">
        <ul class="tabs">
            <li class="li-tab" v-for="(item,index) in tabsParam"
            @click="toggleTabs(index)"
            :class="{active:index == nowIndex}">@{{item}}</li>
        </ul>
        <div class="divTab" v-show="nowIndex === 0">
            <a :href="'http://www.yedushu.com/yefm/searchkey?search_key='+ row.search_word" class="hotWordWrapper" style="padding: 0 15px 15px 27px;display: flex;" v-for="(row,index) in remen">
                <span style="font-size: 20px;width: 30px;text-align: center;">@{{index + 1}}</span>
                <span style="padding-left: 10px;font-size: 16px;color: #333;">@{{row.search_word}}</span>
            </a>
        </div>
        <div class="divTab" v-show="nowIndex === 1">
            <a :href="'http://www.yedushu.com/yefm/searchkey?search_key='+ row.search_word" class="hotWordWrapper" style="padding: 0 15px 15px 27px;display: flex;" v-for="(row,index) in youshengshu">
                <span style="font-size: 20px;width: 30px;text-align: center;">@{{index + 1}}</span>
                <span style="padding-left: 10px;font-size: 16px;color: #333;">@{{row.search_word}}</span>
            </a>
        </div>
    </div>    
@include('yefm.inc.footer')
</div> 
<script src="{{url('/scripts/ximalaya/yefmconfig.js')}}"></script>
<script>
    const xmly = new XMLY();

    new Vue({
        el:'#search_app',
        data:{
            tabsParam: ['热门','有声书','音乐','历史','相声评书','儿童','商业财经'],
            nowIndex: 0,//默认第一个tab为激活状态
            remen: [],
            youshengshu: []
        },
        mounted:function(){                
                // 获取热搜词-热门
                xmly.request({
                    url: 'https://api.ximalaya.com/search/hot_words',
                    type: 'get',
                    params: {
                        top: 20,
                        // category_id: 0
                    }
                }).then(res => {
                    console.log(res.data); 
                    this.remen = res.data;
                });
            },
            function(){
                // 获取热搜词-有声书
                xmly.request({
                    url: 'https://api.ximalaya.com/search/hot_words',
                    type: 'get',
                    params: {
                        top: 20,
                        category_id: 3
                    }
                }).then(res => {
                    console.log(res.data); 
                    this.youshengshu = res.data;
                });
            }
        ,methods:{
            toggleTabs:function(index){
                this.nowIndex = index;
            }           
        }
    });    
</script>
</body>
</html>
